<template>
  <div>
    <el-row
      :gutter="5"
      style="display: flex; margin-bottom: 5px"
      v-for="(item, index) in queryList"
      :key="index"
    >
      <el-col :span="6">
        <el-input v-model="item.colum" placeholder="字段名"></el-input>
      </el-col>
      <el-col :span="6">
        <el-input v-model="item.alias" placeholder="别名"></el-input>
      </el-col>
      <el-col :span="6">
        <el-select
          v-model="item.const"
          placeholder="字典项"
          filterable
          clearable
        >
          <el-option
            v-for="(item, index) in consts"
            :key="index"
            :label="item.cataName"
            :value="item.cataCode"
          ></el-option>
        </el-select>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      default: () => [],
      type: Array
    },
    consts: {
      default: () => [],
      type: Array
    }
  },
  data() {
    return {
      queryList: []
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {},
  watch: {
    value: {
      handler(val) {
        if (val) {
          this.queryList = val;
        }
      },
      deep: true,
      immediate: true
    }
  }
};
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
.el-select {
  width: 100%;
}

.align-center {
  display: flex;
  align-items: center;
}
</style>